let menu=[
  {bianhao:'02568',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'05658',mingcheng:'重型装甲车',fenlei:'装甲车',state:'维修中',price:'1666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'16568',mingcheng:'重型装甲车',fenlei:'装甲车',state:'正常',price:'1666666',way:'分配',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'15668',mingcheng:'通讯车',fenlei:'通讯车',state:'停用',price:'466666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'56258',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'正常',price:'566666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'71468',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'15465',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'分配',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'15647',mingcheng:'轻型步战车',fenlei:'装甲车',state:'维修中',price:'666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'78214',mingcheng:'重型装甲车',fenlei:'装甲车',state:'停用',price:'1666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'89612',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'98712',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'15472',mingcheng:'重型装甲车',fenlei:'装甲车',state:'维修中',price:'1666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'15752',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'正常',price:'566666',way:'分配',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'15498',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'停用',price:'566666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'68720',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'41743',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'54564',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'86822',mingcheng:'重型装甲车',fenlei:'装甲车',state:'维修中',price:'1666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'85971',mingcheng:'重型装甲车',fenlei:'装甲车',state:'正常',price:'1666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'15463',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'89965',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'59666',mingcheng:'轻型步战车',fenlei:'装甲车',state:'维修中',price:'666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'55122',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'正常',price:'566666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'65542',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'26566',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'正常',price:'566666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'87563',mingcheng:'重型装甲车',fenlei:'装甲车',state:'正常',price:'1666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'56997',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'78546',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'78964',mingcheng:'轻型步战车',fenlei:'装甲车',state:'维修中',price:'666666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'08522',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'06999',mingcheng:'重型装甲车',fenlei:'装甲车',state:'正常',price:'1666666',way:'分配',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'89652',mingcheng:'重型装甲车',fenlei:'装甲车',state:'维修中',price:'1666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'胡歌'},
  {bianhao:'66325',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏'},
  {bianhao:'78542',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'76325',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
  {bianhao:'86331',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌'},
  {bianhao:'65463',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'维修中',price:'566666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆'},
]
let newMenu=[]
let num1=0
let num2=0
let num3=0
let num4=0
let num5=0
function newData(){
  for(let i=0;i<menu.length;i++){
    if(menu[i].fenlei=='装甲车'){
     num1++
    }
    if(menu[i].mingcheng=='轻型步战车'){
     num2++
    }
    if(menu[i].mingcheng=='重型装甲车'){
     num3++
    }
    if(menu[i].mingcheng=='后勤保障车'){
     num4++
    }
    if(menu[i].mingcheng=='通讯车'){
     num5++
    }
  }
 
}

newData()

function showMenu(){
    $('#mydiv').append(`
    <ul class="col-md-4 item">
    <li class="zk" id="myli">装甲车
      <ul>
        <li>轻型步战车</li>
        <li>重型装甲车</li>
      </ul>
    </li>
    <li>后勤保障车</li>
    <li>通讯车</li>
  </ul>
  <ul class="col-md-4 item">
    <li class="zk">${num1}
      <ul>
        <li>${num2}</li>
        <li>${num3}</li>
        </ul>
    </li>
   <li>${num4}</li>
   <li>${num5}</li>
  </ul>
  <ul class="col-md-4 item">
    <li  class="zk"><button class="zhankai"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true" id="myspan"></span></button>
    <button type="button" class="btn btn-primary btn-lg tianjia" data-toggle="modal" data-target="#myModal1">
    <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span>
  </button>
  <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal1">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h5 class="modal-title" id="gridSystemModalLabel">新增分类</h5>
            </div>
            <div class="modal-body">
              <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_11">
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary">确认</button>
          </div>
          </div>
          </div>
          </div>

     
      <button type="button" class="btn btn-primary btn-lg bianji" data-toggle="modal" data-target="#myModal4">
      <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    </button>
    <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal4">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="gridSystemModalLabel">编辑分类</h5>
              </div>
              <div class="modal-body">
                <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_2">
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary">确认</button>
            </div>
            </div>
            </div>
            </div>



            <button type="button" class="btn btn-primary btn-lg shanchu" data-toggle="modal" data-target="#myModal7">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    </button>
    <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal7">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="gridSystemModalLabel">删除确认</h5>
              </div>
              <div class="modal-body">
                <span>删除该条客户信息后将不可恢复，确认删除？</span>
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary">确认</button>
            </div>
            </div>
            </div>
            </div>
      <ul>
        <li>
        <button type="button" class="btn btn-primary btn-lg bianji" data-toggle="modal" data-target="#myModal10">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
      </button>
      <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal10">
            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h5 class="modal-title" id="gridSystemModalLabel">编辑分类</h5>
                </div>
                <div class="modal-body">
                  <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_3">
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认</button>
              </div>
              </div>
              </div>
              </div>

       <button type="button" class="btn btn-primary btn-lg shanchu" data-toggle="modal" data-target="#myModal12">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    </button>
    <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal12">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="gridSystemModalLabel">删除确认</h5>
              </div>
              <div class="modal-body">
                <span>删除该条客户信息后将不可恢复，确认删除？</span>
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary">确认</button>
            </div>
            </div>
            </div>
            </div>
        </li>
        <li>
        <button type="button" class="btn btn-primary btn-lg bianji" data-toggle="modal" data-target="#myModal11">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
      </button>
      <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal11">
            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h5 class="modal-title" id="gridSystemModalLabel">编辑分类</h5>
                </div>
                <div class="modal-body">
                  <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_4">
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认</button>
              </div>
              </div>
              </div>
              </div>

     <button type="button" class="btn btn-primary btn-lg shanchu" data-toggle="modal" data-target="#myModal13">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    </button>
    <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal13">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="gridSystemModalLabel">删除确认</h5>
              </div>
              <div class="modal-body">
                <span>删除该条客户信息后将不可恢复，确认删除？</span>
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary">确认</button>
            </div>
            </div>
            </div>
            </div>
        </li>
      </ul>
    </li>
    <li><button class="zhankai"><span class="glyphicon glyphicon-chevron-up " aria-hidden="true"></span></button>
  <!--模态框-->
    <button type="button" class="btn btn-primary btn-lg tianjia" data-toggle="modal" data-target="#myModal2">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
  </button>
  <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal2">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h5 class="modal-title" id="gridSystemModalLabel">新增分类</h5>
            </div>
            <div class="modal-body">
              <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_5">
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary">确认</button>
          </div>
          </div></div>
          </div>

          <button type="button" class="btn btn-primary btn-lg bianji" data-toggle="modal" data-target="#myModal5">
          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
        </button>
        <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal5">
              <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title" id="gridSystemModalLabel">编辑分类</h5>
                  </div>
                  <div class="modal-body">
                    <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_6">
                  </div>
                  <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary">确认</button>
                </div>
                </div>
                </div>
                </div>

                <button type="button" class="btn btn-primary btn-lg shanchu" data-toggle="modal" data-target="#myModal8">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
              </button>
              <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal8">
                    <div class="modal-dialog modal-sm" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h5 class="modal-title" id="gridSystemModalLabel">删除确认</h5>
                        </div>
                        <div class="modal-body">
                          <span>删除该条客户信息后将不可恢复，确认删除？</span>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确认</button>
                      </div>
                      </div>
                      </div>
                      </div>
    </li>

    <li><button class="zhankai"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-primary btn-lg tianjia" data-toggle="modal" data-target="#myModal3">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
  </button>
  <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal3">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h5 class="modal-title" id="gridSystemModalLabel">新增分类</h5>
            </div>
            <div class="modal-body">
              <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_7">
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary">确认</button>
          </div>
          </div>
</div>
  </div>

  <button type="button" class="btn btn-primary btn-lg bianji" data-toggle="modal" data-target="#myModal6">
  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal6">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h5 class="modal-title" id="gridSystemModalLabel">编辑分类</h5>
          </div>
          <div class="modal-body">
            <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_8">
          </div>
          <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">确认</button>
        </div>
        </div>
        </div>
        </div>

      <button type="button" class="btn btn-primary btn-lg shanchu" data-toggle="modal" data-target="#myModal9">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    </button>
    <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal9">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="gridSystemModalLabel">删除确认</h5>
              </div>
              <div class="modal-body">
                <span>删除该条客户信息后将不可恢复，确认删除？</span>
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary">确认</button>
            </div>
            </div>
            </div>
            </div>

    </li>
  </ul>
    `)

}
showMenu()
$('#mydiv').on("click", ".zhankai",function () {
let li=document.getElementById('myli')

if(parseInt(li.style.height)==160){
  $('.zk').css({"height":"40px",})
$('#myspan').css({"transform":"rotate(360deg)"})
}else{
  $('.zk').css({"height":"160px",})
$('#myspan').css({"transform":"rotate(180deg)"})
}

})